<template>
    <div>
        <a-switch :before-change="handleChange" />
        <a-switch :before-change="handleChange" />
        <a-switch :before-change="handleChange" />
        <a-switch v-model:visible="defaultV" />
        <a-space>
            <radio-button
                v-model="radioValue"
                :options="radioCnfig"
                @change="handleRadioChange"
            >
                <template #wlmq="{ option, active }">
                    <span :class="[active && 'text-#f00']">{{ option.label }}</span>
                </template>
            </radio-button>

            <a-button @click="handleClick">click</a-button>
        </a-space>

        <div
            ref="lottiElement"
            class="w-200 h-200 absolute left-0 bottom-0"
        ></div>
    </div>
</template>
<script lang="tsx" setup>
import { ref } from 'vue'
import { useLottie } from '@/hooks'
import { Modal, Message } from '@arco-design/web-vue'

const lottiElement = ref<HTMLDivElement>()
const lottieInstance = useLottie(lottiElement, {
    path: 'https://lottie.host/68bd36a3-b21d-4909-9b61-9be6b0947943/gInO8owFG1.json'
})

const handleClick = () => {
    lottieInstance.value.pause()
}

const radioValue = ref('35345')
const radioCnfig = [
    {
        label: '北京',
        value: 'beijing',
        disabled: true
    },
    {
        label: '上海',
        value: '13123'
    },
    {
        label: '乌鲁木齐',
        value: 'wlmq'
    },
    {
        label: '黑龙江',
        value: '234'
    }
]

const handleRadioChange = value => {
    // eslint-disable-next-line
    console.log('🚀 ~ value:', value)
}

const defaultV = ref(true)
const handleChange = () => {
    // Modal
    // return new Promise((resolve) => {
    //     setTimeout(() => {
    //         resolve(false)
    //     }, 3000)
    // })
    Modal.info({
        title: '温馨提示',
        content() {
            return (
                <div>
                    12312312312312312312312312312312312312312312 23
                    123123123123123123123123123123123123123
                </div>
            )
        },
        hideCancel: false,
        closable: true,
        onBeforeOk: () => {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(false)
                    Message.error('点击了确定,返回false')
                }, 3000)
            })
        }
    })
    return false
}
</script>
